<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link href="../css/all.min.css" rel="stylesheet">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/sweetalert2.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
</head>
<body>
    <div id="userApp" class="container-fluid p-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">用户列表</h5>
                <div class="d-flex gap-2">
                    <div class="input-group">
                        <input type="text" class="form-control" v-model="searchKey" placeholder="搜索用户...">
                        <button class="btn btn-primary" @click="searchUsers">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                    <button class="btn btn-success" style="min-width: 120px;" @click="handleAdd">
                        <i class="fas fa-user-plus"></i> 添加用户
                    </button>
                </div>
            </div>
            <div class="card-body table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>备注</th>
                            <th>爆料次数</th>
                            <th>正在审核</th>
                            <th>审核成功</th>
                            <th>审核失败</th>
                            <th>用户金额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="user in users" :key="user.id">
                            <td>{{ user.user }}</td>
                            <td>
                                <span v-if="user.remark" class="text-muted">{{ user.remark }}</span>
                                <span v-else class="text-black-50">暂无备注</span>
                            </td>
                            <td>{{ user.reportCount }}</td>
                            <td>{{ user.pendingCount }}</td>
                            <td>{{ user.successCount }}</td>
                            <td>{{ user.failCount }}</td>
                            <td>¥{{ (user.balance/100).toFixed(2) }}</td>
                            <td>
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-danger" @click="handleDelete(user)">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                    <button class="btn btn-sm btn-primary" @click="handleWithdraw(user)">
                                        <i class="fas fa-money-bill"></i> 提现
                                    </button>
                                    <button class="btn btn-sm btn-warning" @click="handleBan(user)">
                                        <i class="fas fa-ban"></i> 封禁
                                    </button>
                                    <button class="btn btn-sm btn-info" @click="handleView(user)">
                                        <i class="fas fa-eye"></i> 查看
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="text-muted small">
                        共 {{ totalUsers }} 条记录，每页 {{ pageSize }} 条，当前第 {{ currentPage }}/{{ Math.ceil(totalUsers/pageSize) }} 页
                    </div>
                    <nav>
                        <ul class="pagination justify-content-center mb-0">
                            <li class="page-item" :class="{ disabled: currentPage === 1 }">
                                <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">上一页</a>
                            </li>
                            <li v-for="page in pageNumbers" 
                                :key="page" 
                                class="page-item"
                                :class="{ active: currentPage === page }">
                                <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
                            </li>
                            <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                                <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">下一页</a>
                            </li>
                        </ul>
                    </nav>
                    <div style="width: 200px"><!-- 占位，保持分页居中 --></div>
                </div>
            </div>
        </div>

        <!-- 批量添加用户模态框 - 移动到 Vue 根元素内 -->
        <div class="modal fade" id="batchAddModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">批量添加用户</h5>
                        <button type="button" class="btn-close" @click="closeModal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">用户列表（每行一个用户名）</label>
                            <textarea class="form-control" 
                                v-model="batchUsers"
                                rows="10"
                                placeholder="请输入用户名，每行一个&#10;例如：&#10;user1&#10;user2&#10;user3"></textarea>
                        </div>
                        
                        <!-- 上传进度 -->
                        <div class="progress mt-3" v-if="uploading">
                            <div class="progress-bar progress-bar-striped progress-bar-animated"
                                :style="{ width: uploadProgress + '%' }">
                                {{ currentUploadIndex }} / {{ totalUploadCount }}
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @click="closeModal">取消</button>
                        <button type="button" 
                            class="btn btn-primary" 
                            @click="submitBatchUsers"
                            :disabled="uploading">
                            {{ uploading ? '添加中...' : '确定添加' }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/lib/vue.min.js"></script>
    <script src="../js/lib/bootstrap.bundle.min.js"></script>
    <script src="../js/lib/sweetalert2.min.js"></script>
    <script src="../js/pages/users.js"></script>
</body>
</html> 